<template>
	<view class="login_box">
		<view class="text_login">
			<!-- logo -->
			<image class="login_logo" src="../../static/logo/orange.png" alt="" />

			<!-- 表单区域 -->
			<view class="login_phone">
				<text>手机号</text>
				<input type="text" maxlength="11" v-model.number="phone" />
			</view>
			<view class="login_code">
				<text>验证码</text>
				<input type="text" maxlength="4" v-model="code" />
				<view hover-class="touchOpacity" @click="getCode">{{msg}}</view>
			</view>

			<!-- 登录按钮 -->
			<view class="login_but" hover-class="touchOpacity">
				<text space="ensp" @click="login">登 录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '13333333333',
				code: '',
				msg: '获取验证码',
				isClick: true, // 是否可以点击验证码
			}
		},
		methods: {
			// 获取验证码
			getCode() {

				// 判断验证是否重复点击
				if (!this.isClick) {
					uni.showToast({
						title: "不能重复点击",
						icon: "error",
					});
					return
				}

				// 验证码校验
				let regExp = /^1[3-9][0-9]{9}$/;
				// 判断验证码是否正确
				if (!regExp.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: "error",
					})
					return
				}

				let data = {
					phone: this.phone,
				};

				this.$http({
					url: '/api/sms',
					data,
				}).then(res => {
					if (res.data.code === 200) {
						let n = 60;

						this.code = res.data.list.code;

						// 存储手机号
						uni.setStorage({
							key: 'phone',
							data: this.phone,
						})

						// 存储验证码
						uni.setStorage({
							key: 'code',
							data: res.data.list.code,
						});

						// 开启定时器
						const timer = setInterval(() => {
							this.isClick = false;
							this.msg = n + '秒后重新发送';
							--n;
							if (n < 0) {
								n = 60;
								this.isClick = true;
								this.msg = '获取验证码';
								// 清除定时器
								clearInterval(timer);

								// 清除缓存数据
								uni.removeStorageSync('code');
								uni.removeStorageSync('phone');
							}
						}, 1000)
					}
				})
			},

			// 登录
			login() {
				let phone = uni.getStorageSync('phone');

				let code = uni.getStorageSync('code');

				// 判断手机号跟获取验证码的手机号是否一致
				if (phone !== this.phone || phone === '' ||
					this.phone === '') {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'error'
					})
					return;
				}

				// 判断验证码是否正确
				if (code !== this.code || code === '' || this.code === '') {
					uni.showToast({
						title: "验证码不正确",
						icon: "error"
					})
					return;
				}

				let data = {
					phone: this.phone,
				};

				// 请求手机号和验证码
				this.$http({
					url: '/api/smslogin',
					data,
					method: 'post',
				}).then(res => {
					if (res.data.code === 200) {
						// 消息提示
						uni.showToast({
							title: res.data.msg
						});
						// 数据存储
						uni.setStorage({
							key: 'userInfo',
							data: res.data.list,
						})

						// 页面跳转
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/user/user',
							})
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/textlogin.css");
</style>